<template>
  <div>
    <SearchBox :singleLine="true" @handleQuery="handleQuery" @resetQuery="resetQuery">
      <template slot="form">
        <el-form class="search-form" ref="searchForm" :model="searchForm" label-width="auto" size="medium">
          <el-form-item label="物料名称">
            <el-input v-model="searchForm.materialName" placeholder="请输入物料名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="物料编号">
            <el-input v-model="searchForm.materialCode" placeholder="请输入物料编号" clearable></el-input>
          </el-form-item>
        </el-form>
      </template>
    </SearchBox>
    <EvTable
      ref="reciverGroupTable"
      :options="{ data, columns, height: '400', toolbarConfig: { custom: false } }"
      :tablePage="page"
      @handlePageChange="handlePageChange"
    >
    </EvTable>
  </div>
</template>
  <script>
import SearchBox from "@/components/EvTable/searchBox.vue";
export default {
  components: {
    SearchBox,
  },
  props: {
    microservices: {
      type: String,
      default: "function-base-data",
      required: true,
    },
    resource: {
      type: String,
      default: "Material",
      required: true,
    },
  },
  data() {
    return {
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      // 对象组表格
      data: [],
      columns: [
        { type: "radio", fixed: "left", align: "center", width: 50 },
        { title: "序号", fixed: "left", align: "center", width: 60, type: "seq" },
        {
          title: "名称",
          field: "materialName",
        },
        {
          title: "编号",
          field: "materialCode",
        },
      ],
      searchForm: {},
    };
  },
  watch: {
    microservices: {
      handler(newVal) {
        if (newVal && this.resource) {
          this.loadData();
        }
      },
    },
    resource: {
      handler(newVal) {
        if (newVal && this.microservices) {
          this.loadData();
        }
      },
    },
  },
  mounted() {},
  methods: {
    // 加载数据
    loadData() {
      let params = [];
      Object.keys(this.searchForm).forEach((el) => {
        if (this.searchForm[el]) {
          params.push([el, "LIKE", `%${this.searchForm[el]}%`]);
        }
      });
      if (params.length > 0) {
        this.commonSearch = { AND: [...params] };
      } else {
        this.commonSearch = null;
      }
      let condition = null;
      let orderBy = null;
      if (this.commonSearch && JSON.stringify(this.commonSearch) != "{}") {
        let common = JSON.parse(JSON.stringify(this.commonSearch));
        if (!condition) {
          condition = { AND: [] };
        }
        condition.AND = [...condition.AND, ...common.AND];
      }
      this.$server()
        .query(
          this.microservices,
          this.resource,
          condition,
          orderBy ? orderBy : "insertTime desc",
          { current: this.page.currentPage, size: this.page.pageSize },
          true
        )
        .then((response) => {
          this.page.total = response.total;
          this.data = response.list;
        })
        .catch((response) => {
          this.$message.error(response.data.message);
        });
    },
    handleDialogConfirm() {
      this.$emit("handleDialogConfirm", this.$refs.reciverGroupTable.getSelectRecords());
    },
    // 执行搜索
    handleQuery() {
      this.page.currentPage = 1;
      this.loadData();
    },
    resetQuery() {
      this.searchForm = {
        name: null,
        code: null,
      };
      this.page.currentPage = 1;
      this.loadData();
    },
    handlePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage;
      this.page.pageSize = pageSize;
      this.loadData();
    },
  },
};
</script>
  <style lang="scss" scoped>
.search-form {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: 32%;
    margin-right: 1%;
    margin-bottom: 10px;
  }
}
</style>
  